<script setup>
import { ref, reactive, computed, onMounted, toRaw } from 'vue'
import { ElMessage } from 'element-plus'

//引入API
// import {} from '../../api/job.js'
// import {} from '../../api/dept.js'

const loadDataCount = ref(0);//数据加载计数标识
//表单是否加载中
const formLoading = computed(()=>loadDataCount.value < 1);

const deptArr = ref([]);
function doLoadDeptDatas() {//加载部门选择框数据
    //TODO: 使用API获取数据
    setTimeout(()=>{
        let data =  [
            {id:1, name:'开发部'},
            {id:2, name:'运维部'},
            {id:3, name:'销售部'},
            {id:4, name:'行政部'},
            {id:5, name:'设备部'}
        ];

        // 成功后执行以下操作
        deptArr.value = data;
        loadDataCount.value++;
    }, 1000);
}

onMounted(()=> {//挂载后执行
    doLoadDeptDatas();//部门数据
});

function createFormData() {//表单数据对象模板
    return {name:'',dept:{id:undefined, name:''},baseSal:0,performanceSal:0};
}
//表单数据
const formData = ref(createFormData());
const formRef = ref(null);//表单组件
const formRules = reactive({//校验规则
    name: [{required:true, validator: (rule, value, callback)=>{
        if(!value) {
            callback(new Error('请填写职位名称'));
            return;
        }
        if(value.length > 30) {
            callback(new Error('职位名称长度范围是1~30'));
            return;
        }
        //TODO: 发送请求,校验是否重复
        setTimeout(()=>{//模拟
            if(Math.random() > 0.7) {
                callback();//成功
            } else {
                callback(new Error('该职位名称已存在'));//失败
            }
        }, 500);
    }, trigger:'blur'}],
    'dept.id': [{required:true, type:'number', message:'请选择部门', trigger:'change'}],
    baseSal: [{required:true, type:'number', validator: (rule, value, callback)=>{
        if(value !== 0 && !value) {
            callback(new Error('请填写该职位的基本工资'));
            return;
        }
        if(value < 0) {
            callback(new Error('基本工资不能小于0'));
            return;
        }
        callback();
    }, trigger:'blur'}],
    performanceSal: [{required:true, type:'number', validator: (rule, value, callback)=>{
        if(value !== 0 && !value) {
            callback(new Error('请填写该职位的绩效工资'));
            return;
        }
        if(value < 0) {
            callback(new Error('绩效工资不能小于0'));
            return;
        }
        callback();
    }, trigger:'blur'}],
});
function doFormSubmit() {//表单校验与提交
    formRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('校验通过');
            //TODO: 提交添加的数据
            let params = toRaw(formData.value);
            params.deptId = formData.value.dept.id;
            console.log('submit:', params);

            //成功后执行以下操作
            ElMessage.success('添加成功');
        } else { 
            //console.log('校验不通过:', fields);
            ElMessage.warning('信息有误，请查看对应的提示信息');
        }
    });;
}
function doFormReset() {//表单重置
    formRef.value.resetFields();
}

</script>
<template>
    <div class="dept-add-page-dl" >
        <div class="title-dl" >职位添加</div>
        <el-form :model="formData" label-width="130px" v-loading="formLoading"
        :rules="formRules" status-icon ref="formRef">
            <el-form-item label="职位名称：" prop="name">
                <el-input v-model="formData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="基本工资：" prop="baseSal">
                <el-input type="number" v-model="formData.baseSal" autocomplete="off" />
            </el-form-item>
            <el-form-item label="绩效工资：" prop="performanceSal">
                <el-input type="number" v-model="formData.performanceSal" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属部门：" prop="dept.id">
                <el-select v-model="formData.dept.id" placeholder="请选择" >
                    <el-option v-for="d in deptArr" :key="d.id" :label="d.name" :value="d.id"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doFormSubmit">确定</el-button>
                <el-button @click="doFormReset" >重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
.dept-add-page-dl {
    width: 600px;
}
.title-dl {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
</style>